<template>
  <a-modal
    :title="'安全验收计划项' + title"
    cancel-text="取消"
    ok-text="保存"
    :width="900"
    :visible="visible"
    @cancel="cancel()"
  >
    <template slot="footer">
      <a-button v-if="disabled" @click="cancel()">关闭</a-button>
      <template v-else>
        <a-button @click="cancel()">取消</a-button>
        <a-button type="primary" @click="ok">保存</a-button>
      </template>
    </template>
    <div class="about-master-container">
      <a-form-model ref="form" :model="modalData" :rules="rulesModal">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="验收类别" prop="acceptanceTypeId">
              <BSelect
                :request="e => getSelectList('11')"
                :disabled="disabled"
                v-model="modalData.acceptanceTypeId"
                @selectChange="e => modalData.acceptanceTypeName = e.name "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="验收负责人" prop="acceptanceResEmployeeId">
              <SelectPersonByProject
                :disabled="disabled"
                v-model="modalData.acceptanceResEmployeeId"
                @personChanged="e => modalData.acceptanceResEmployeeName = e.employeeName "
                :project-id="projectId"
                :show-search="true"
                placeholder="请选择"
                option-label-prop="children"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="参与人" prop="userIds">
              <SelectPersonByProject
                :disabled="disabled"
                v-model="modalData.userIds"
                :project-id="projectId"
                :show-search="true"
                mode="multiple"
                placeholder="请选择"
                option-label-prop="children"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="分包单位名称" prop="subContractorName">
              <b-input v-if="disabled" v-model="modalData.subContractorName" disabled />
              <div class="flex" v-else>
                <SelectSubcontractor
                  :disabled="disabled"
                  style="width: 75%;"
                  v-show="!isInput"
                  v-model="modalData.subContractorId"
                  placeholder="请选择"
                  :projectId="projectId"
                  @selectChange="e => modalData.subContractorName = e.name "
                />
                <b-input v-show="isInput" class="fbdw" style="width: 75%;height:32px" v-model="modalData.subContractorName" />
                <a @click="toggleSub" style="margin-left:10px">{{ isInput ? '分包单位' : '其他单位' }}</a>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计划验收时间" prop="acceptanceDate">
              <a-date-picker
                :disabled="disabled"
                v-model="modalData.acceptanceDate"
                :disabled-date="disabledMonth"
                :default-picker-value="moment().startOf('month').subtract('month')"
                placeholder="请选择"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="验收部位" prop="acceptancePart">
              <BaseTextarea v-model.trim="modalData.acceptancePart" :disabled="disabled" placeholder="请输入"
                            style="resize: none" :rows="2"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="等级" prop="levelTypeId">
              <BSelect
                :disabled="disabled"
                :request="e => getSelectList('29')"
                v-model="modalData.levelTypeId"
                @selectChange="e => modalData.levelTypeName = e.name "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注">
              <BaseTextarea v-model.trim="modalData.remark" :disabled="disabled" style="resize: none" placeholder="请输入"
                            :rows="2"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { getSelectListByType } from '@/api/safetySupervision/common'
import { getSubcontractor } from '@/api/businessAffairs/sml'
import moment from 'moment'
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
import SelectSubcontractor from '@/components/Select/SelectSubcontractor'

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: false
    },
    pageType: {
      type: String,
      default: 'add'
    },
    projectId: {
      type: String,
      default: ''
    }
  },
  components: {
    ASelectOrgPeople,
    SelectPersonByProject,
    SelectSubcontractor
  },
  data() {
    return {
      moment,
      modalData: {},
      isInput: false,
      subcontractorList: [],
      rulesModal: {
        acceptanceTypeId: [{ required: true, message: '请选择验收类别' }],
        levelTypeId: [{ required: true, message: '请选择等级' }],
        userIds: [{ required: true, message: '请选择参与人' }],
        acceptanceResEmployeeId: [{ required: true, message: '请选择验收负责人' }],
        subContractorName: [{ required: true, message: '请选择分包单位' }],
        acceptanceDate: [{ required: true, message: '请选择计划验收时间' }],
        acceptancePart: [{ required: true, message: '请输入验收部位' }]
      }
    }
  },
  computed: {
    title() {
      let end = ''
      if (this.pageType === 'add') end = '新增'
      if (this.pageType === 'edit') end = '编辑'
      if (this.pageType === 'look') end = '查看'
      return end
    },
    disabled() {
      return this.pageType === 'look'
    }
  },
  watch: {
    projectId() {
      this.getSubcontractorList()
    },
    visible(newVal) {
      if (newVal) {
        this.modalData = this.form
        if (this.modalData.subContractorId === undefined || this.modalData.subContractorId) {
          this.isInput = false
        } else {
          this.isInput = true
        }
        console.log('this.modalData',this.modalData)
        console.log('input',this.isInput)
      }
    }
  },
  methods: {
    disabledMonth(current) {
      return (
        (current && current < this.moment().startOf('month').subtract('month')) ||
        current > this.moment().endOf('month').subtract('month', -1).endOf('month')
      )
    },
    toggleSub() {
      this.modalData.subContractorName = this.modalData.subContractorId = ''
      this.isInput = !this.isInput
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    validateModalForm() {
      let flag = false
      this.$refs.form.validate((valid) => {
        flag = valid
        if(!valid) {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
      return flag
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    ok() {
      if (!this.validateModalForm()) return

      if (typeof this.modalData.acceptanceDate != 'string') {
        this.modalData.acceptanceDate = this.modalData.acceptanceDate.format('YYYY-MM-DD')
      }
      console.log(this.modalData)
      if (this.modalData.subContractorId) {
        //验收分包商name
        this.modalData.subContractorName = this.subcontractorList.filter(
          (item) => this.modalData.subContractorId == item.subContractorId
        )[0]?.name
      }

      this.cancel()

      if (this.pageType === 'edit') {
        this.$emit('edit', this.$clone(this.modalData))
      }
      if (this.pageType === 'add') {
        this.modalData.creatorName = this.$userInfo().name
        this.modalData.type = 0
        this.modalData.createTime = this.$dateFormat(Date.now(), 'D')
        this.modalData.key = Date.now() + ''
        this.$emit('add', this.$clone(this.modalData))
      }
    },

    async getSelectList(type) {
      const [err, res] = await getSelectListByType({ type })
      if (!err) {
        const list = res.data || []
        return { code: 200, data: list.filter((item) => item.enabled) }
      }
      return { code: 500 }
    },
    //获取分包商列表
    getSubcontractorList() {
      getSubcontractor({ id: this.projectId }).then((res) => {
        this.subcontractorList = res.data || []
      })
    }
  }
}
</script>


<style lang="less" scoped>
@deep: ~'>>>';
form .ant-mentions,
form textarea.ant-input {
  height: auto !important;
  width: 100%;
}
@{deep} .fbdw{
  margin-top: -4px;
  input{
    height: 100%;
  }

}
</style>
